<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国4A-5A级景区分布可视化分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f1b31, #1d2b50, #2c3e6e);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 20px;
            position: relative;
        }

        .header-content {
            display: inline-block;
            position: relative;
        }

        h1 {
            font-size: 42px;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
            letter-spacing: 2px;
        }

        .subtitle {
            font-size: 18px;
            color: #a0b9e6;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .header-decoration {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            border-radius: 2px;
            box-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: rgba(16, 30, 58, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(79, 172, 254, 0.3);
            position: relative;
            overflow: hidden;
        }

        .chart-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
        }

        .chart-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #4facfe;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chart-title i {
            font-size: 26px;
        }

        #roseChart {
            width: 100%;
            height: 550px; /* 增加高度以容纳图表 */
        }

        .stats-panel {
            background: rgba(16, 30, 58, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(79, 172, 254, 0.3);
            position: relative;
            overflow: hidden;
        }

        .stats-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
        }

        .filter-section {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .filter-item {
            flex: 1;
            min-width: 200px;
        }

        .filter-item label {
            display: block;
            margin-bottom: 8px;
            color: #a0b9e6;
            font-size: 16px;
        }

        .filter-item select {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid rgba(79, 172, 254, 0.5);
            background: rgba(10, 20, 40, 0.7);
            color: #fff;
            font-size: 16px;
            transition: all 0.3s;
        }

        .filter-item select:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.3);
        }

        .stats-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: rgba(10, 20, 40, 0.7);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            border: 1px solid rgba(79, 172, 254, 0.2);
            transition: all 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2);
            border-color: #4facfe;
        }

        .stat-value {
            font-size: 36px;
            font-weight: bold;
            margin: 15px 0;
            color: #4facfe;
            text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
        }

        .stat-label {
            color: #a0b9e6;
            font-size: 16px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 20px;
        }

        .data-table th {
            background: rgba(79, 172, 254, 0.3);
            padding: 15px;
            text-align: left;
            font-weight: 500;
        }

        .data-table td {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .data-table tr:nth-child(even) {
            background: rgba(10, 20, 40, 0.5);
        }

        .data-table tr:hover {
            background: rgba(79, 172, 254, 0.15);
        }

        .footer {
            text-align: center;
            padding: 30px 0;
            color: #a0b9e6;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 30px;
        }

        .update-time {
            color: #4facfe;
            font-weight: bold;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
            font-size: 18px;
            color: #4facfe;
        }

        .loading::after {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(79, 172, 254, 0.3);
            border-radius: 50%;
            border-top-color: #4facfe;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 1200px) {
            .dashboard {
                grid-template-columns: 1fr;
            }

            .stats-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .stats-cards {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 32px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1>全国4A-5A级景区分布可视化分析</h1>
                <p class="subtitle">基于玫瑰图的可视化展示，直观呈现各省市高等级景区数量分布与排名</p>
                <div class="header-decoration"></div>
            </div>
        </header>

        <div class="dashboard">
            <div class="chart-container">
                <div class="chart-title">
                    <i>📊</i> 景区分布玫瑰图
                </div>
                <div id="roseChart">
                    <div class="loading">数据加载中...</div>
                </div>
            </div>

            <div class="stats-panel">
                <div class="chart-title">
                    <i>📈</i> 景区数据分析
                </div>

                <div class="filter-section">
                    <div class="filter-item">
                        <label for="province-filter">按省份筛选</label>
                        <select id="province-filter">
                            <option value="all">全部省份</option>
                            <!-- 省份选项将通过JS动态加载 -->
                        </select>
                    </div>

                    <div class="filter-item">
                        <label for="level-filter">按等级筛选</label>
                        <select id="level-filter">
                            <option value="all">全部等级</option>
                            <option value="5A">5A级景区</option>
                            <option value="4A">4A级景区</option>
                        </select>
                    </div>
                </div>

                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-value" id="total-count">0</div>
                        <div class="stat-label">景区总数</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-value" id="top-province">-</div>
                        <div class="stat-label">景区最多省份</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-value" id="avg-per-province">0</div>
                        <div class="stat-label">省份平均数量</div>
                    </div>
                </div>

                <div class="chart-title" style="margin-top: 20px;">
                    <i>📋</i> 景区数据详情
                </div>
                <div style="overflow-x: auto;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>省份</th>
                                <th>4A级景区</th>
                                <th>5A级景区</th>
                                <th>总数</th>
                                <th>占比</th>
                            </tr>
                        </thead>
                        <tbody id="data-table-body">
                            <!-- 表格数据将通过JS动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>时间: <span class="update-time" id="update-time">--</span> | 全国旅游景区数据分析平台</p>
            <p>© 2025 全国旅游景区数据分析中心 | 数据可视化展示系统</p>
        </div>
    </div>

    <script>
        // 初始化页面
        $(document).ready(function() {
            // 更新时间
            updateTime();

            // 从后端API获取数据
            fetchData();

            // 筛选器事件监听
            $('#province-filter, #level-filter').change(function() {
                filterData();
            });
        });

        // 更新时间显示
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            $('#update-time').text(timeString);
        }

        // 从后端获取数据
        function fetchData() {
            $.ajax({
                url: '/menu/get_rose_data',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.code === 0) {
                        // 处理数据：添加4A和5A的模拟数据
                        const processedData = response.data.map(item => {
                            // 模拟4A和5A景区数量（实际项目中应从后端获取真实数据）
                            const count4A = Math.floor(item.value * 0.7);
                            const count5A = item.value - count4A;

                            return {
                                name: item.name,
                                value: item.value,
                                count4A: count4A,
                                count5A: count5A
                            };
                        });

                        initChart(processedData);
                        initStats(processedData);
                        initTable(processedData);
                        populateProvinceFilter(processedData);
                    } else {
                        console.error('获取数据失败:', response.msg);
                        $('#roseChart .loading').text('数据加载失败: ' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('请求失败:', error);
                    $('#roseChart .loading').text('数据加载失败: ' + error);
                }
            });
        }

        // 初始化图表 - 优化了玫瑰图大小和位置
        function initChart(data) {
            const chart = echarts.init(document.getElementById('roseChart'));

            // 按值排序
            const sortedData = [...data].sort((a, b) => b.value - a.value);

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        const item = data.find(d => d.name === params.name);
                        return `
                            <div style="font-weight:bold;margin-bottom:5px">${params.name}</div>
                            <div>总数: ${params.value}个</div>
                            <div>5A级: ${item.count5A}个</div>
                            <div>4A级: ${item.count4A}个</div>
                        `;
                    },
                    backgroundColor: 'rgba(10, 20, 40, 0.95)',
                    borderColor: '#4facfe',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    padding: 15
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 20,
                    top: 50,
                    bottom: 50,
                    textStyle: {
                        color: '#a0b9e6',
                        fontSize: 14
                    },
                    pageTextStyle: {
                        color: '#a0b9e6'
                    }
                },
                series: [{
                    name: '景区数量',
                    type: 'pie',
                    radius: ['15%', '70%'], // 调整半径使玫瑰图更小
                    center: ['38%', '55%'], // 调整中心位置
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8,
                        borderColor: '#0f1b31',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 15,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(79, 172, 254, 0.7)'
                        },
                        label: {
                            show: true,
                            formatter: '{b}\n{c}',
                            position: 'inside',
                            backgroundColor: 'rgba(0,0,0,0.5)',
                            borderRadius: 4,
                            padding: [5, 10],
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    data: sortedData.map(item => ({
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            color: getRandomColor()
                        }
                    }))
                }]
            };

            chart.setOption(option);

            // 窗口大小变化时调整图表
            window.addEventListener('resize', function() {
                chart.resize();
            });

            // 移除加载状态
            $('#roseChart .loading').remove();
        }

        // 初始化统计信息
        function initStats(data) {
            const totalCount = data.reduce((sum, item) => sum + item.value, 0);
            const avgPerProvince = Math.round(totalCount / data.length);

            // 找到景区数量最多的省份
            const topProvince = [...data].sort((a, b) => b.value - a.value)[0];

            $('#total-count').text(totalCount);
            $('#top-province').text(`${topProvince.name} (${topProvince.value})`);
            $('#avg-per-province').text(avgPerProvince);
        }

        // 初始化表格
        function initTable(data) {
            const tableBody = $('#data-table-body');
            tableBody.empty();

            // 按景区数量排序
            const sortedData = [...data].sort((a, b) => b.value - a.value);

            sortedData.forEach(item => {
                const percentage = ((item.value / sortedData.reduce((sum, d) => sum + d.value, 0)) * 100).toFixed(1);

                const row = `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.count4A}</td>
                        <td>${item.count5A}</td>
                        <td><strong>${item.value}</strong></td>
                        <td>${percentage}%</td>
                    </tr>
                `;
                tableBody.append(row);
            });
        }

        // 填充省份筛选器
        function populateProvinceFilter(data) {
            const filter = $('#province-filter');
            const provinces = [...new Set(data.map(item => item.name))].sort();

            provinces.forEach(province => {
                filter.append(`<option value="${province}">${province}</option>`);
            });
        }

        // 筛选数据
        function filterData() {
            const province = $('#province-filter').val();
            const level = $('#level-filter').val();

            // 重新从后端获取数据
            $.ajax({
                url: '/menu/get_rose_data',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.code === 0) {
                        // 处理数据：添加4A和5A的模拟数据
                        let filteredData = response.data.map(item => {
                            // 模拟4A和5A景区数量
                            const count4A = Math.floor(item.value * 0.7);
                            const count5A = item.value - count4A;

                            return {
                                name: item.name,
                                value: item.value,
                                count4A: count4A,
                                count5A: count5A
                            };
                        });

                        // 应用省份筛选
                        if (province !== 'all') {
                            filteredData = filteredData.filter(item => item.name === province);
                        }

                        // 应用等级筛选（模拟）
                        if (level !== 'all') {
                            filteredData = filteredData.map(item => {
                                return {
                                    ...item,
                                    value: level === '5A' ? item.count5A : item.count4A
                                };
                            });
                        }

                        initChart(filteredData);
                        initStats(filteredData);
                        initTable(filteredData);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('请求失败:', error);
                }
            });
        }

        // 生成随机颜色
        function getRandomColor() {
            const colors = [
                '#4facfe', '#00f2fe', '#6a11cb', '#2575fc', '#38ef7d',
                '#ff9a9e', '#a6c0fe', '#fbc2eb', '#ffecd2', '#fcb69f',
                '#43e97b', '#38f9d7', '#fa709a', '#fee140', '#a8edea',
                '#d4fc79', '#96e6a1', '#fccb90', '#e0c3fc', '#89f7fe'
            ];
            return colors[Math.floor(Math.random() * colors.length)];
        }
    </script>
</body>
</html>